/**
 * Created by YJH on 2018/6/8.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Modal,
    ScrollView,
    DeviceEventEmitter,
} from 'react-native';
import ThemeFactory, {ThemeFlags} from '../../../res/styles/ThemeFactory';
import ThemeDao from '../../expand/dao/ThemeDao';
import {ACTION_NOTIFY} from '../home/HomePage';

export default class CustomThemePage extends Component {

    constructor(props) {
        super(props);
        this.themeDao=new ThemeDao();

    }

    onSelectThemeItem(key) {
        this.props.onModalClose();
        this.themeDao.saveTheme(ThemeFlags[key]);
        //发送通知，通知修改主题
        DeviceEventEmitter.emit('ACTION_BASE', ACTION_NOTIFY.changeTheme, ThemeFactory.createTheme(ThemeFlags[key]))
    }

    getThemeItem(key) {
        let themeTitle = <TouchableOpacity style={{flex: 1}} onPress={() => this.onSelectThemeItem(key)}>
            <View style={[{backgroundColor: ThemeFlags[key]}, styles.themeItem]}>
                <Text style={{color: 'white', fontWeight: '300'}}>{key}</Text>
            </View>
        </TouchableOpacity>;

        return themeTitle;
    }

    renderThemeItems() {
        let views = [];
        for (let i = 0, keys = Object.keys(ThemeFlags), l = keys.length; i < l; i += 3) {
            let key1 = keys[i], key2 = keys[i + 1], key3 = keys[i + 2];
            views.push(<View key={i} style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                {this.getThemeItem(key1)}
                {this.getThemeItem(key2)}
                {this.getThemeItem(key3)}
            </View>)
        }

        return views;
    }

    //visible={this.props.visiable} 表示：在父组件中控制Modal显示或者隐藏
    //onRequestClose={()=>this.props.onModalClose} 表示：从这里（子组件）通知父组件子组件Modal已经隐藏

    renderThemeView() {
        return <Modal
            animationType="slide"
            transparent={false}
            visible={this.props.themeVisible}
            onRequestClose={() => this.props.onModalClose()}
        >
            <View style={styles.modalContent}>
                <ScrollView >
                    {this.renderThemeItems()}
                </ScrollView>
            </View>
        </Modal>;
    }

    render() {
        let themeView = this.props.themeVisible ? <View style={styles.container}>
            {this.renderThemeView()}
        </View> : null;
        return themeView;

    }
}

const styles = StyleSheet.create(
    {
        container: {
            flex: 1,
        },
        modalContent: {
            flex: 1,
            backgroundColor: 'white',
            margin: 10,
            borderRadius: 3,
            padding: 3,
            justifyContent: 'center',

        },
        themeItem: {
            width: 80,
            height: 100,
            marginVertical: 5,
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: 3,
            borderColor: 'white',
            borderWidth: 1,
        },

    }
);